<template>

        <rx-monaco-editor
          ref="script"
          language="java"
          v-model="mdl.script"
          style="height:350px;"
        >
            <template v-slot:monacoeditor>
                {{i18n('list.rowValue','插入行值变量')}}:<a-select :options="fields" @change="onChange"
                                 style="width:100px"
                                 :dropdown-menu-style="{width:'200px'}"
                                 :dropdownMatchSelectWidth="false"
            ></a-select>
                <a-dropdown>
                    <a-menu slot="overlay" @click="onSqlExp">
                        <a-menu-item key="ctxPath">{{i18n('list.appPath','应用程序路径')}}</a-menu-item>
                        <a-menu-item key="curUserId">{{i18n('form.currentUserID','当前用户ID')}}</a-menu-item>
                        <a-menu-item key="curDepId">{{i18n('form.mainDepart','当前主部门')}}</a-menu-item>
                        <a-menu-item key="curTenantId">{{i18n('form.organizationID','当前机构Id')}}</a-menu-item>
                    </a-menu>
                    <a-button style="margin-left: 8px">{{i18n('list.insertSQL','插入上下文的SQL条件参数')}}
                        <a-icon type="down"/>
                    </a-button>
                </a-dropdown>
                <a-button style="margin-left: 20px" @click="alert" type="primary">
                    {{i18n('list.help','帮助')}}
                </a-button>
            </template>
        </rx-monaco-editor>

</template>

<script>
  import {RxMonacoEditor} from "@lowcode/jpaas-common-lib"

  export default {
    name: "renderConfig_script",
    props: ["layerid", "destroy"],
    components: {
      RxMonacoEditor
    },
    data() {
      return {
        to: "http://doc.redxun.cn/docs/jpaas_manual/renderScript",
        labelCol: {span: 6},
        wrapperCol: {span: 18},
        labelCol1: {span: 3},
        wrapperCol1: {span: 19},
        form: this.$form.createForm(this),
        mdl: {},
        fields: []
      }
    },
    methods:{
        i18n(name,text,key){
            return this.$ti18(name,text,"formCellRender",key);
        },
        alert(){
            window.open("http://doc.redxun.cn/docs/jpaas_manual/renderScript", "_blank");
        },
      setData(data,fieldDts) {
        this.mdl = data;
        this.fields = fieldDts;
      },
      validate(callback){
        var self=this;
        this.form.validateFields((err, values) => {
          if(err){
            return;
          }
          callback();
        });
      },
      getData() {
        return this.mdl;
      },
      changeData(e, field) {
        this.mdl[field] = e.target.checked;
      },
      onSqlExp(e) {
        this.$refs.script.insertContent(e.key);
      },
      onChange(value) {
        this.$refs.script.insertContent(value);
      }
    }
  }
</script>

<style scoped>

</style>